<template>
	<view class="home-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<image class="header-bg" :src="bg_1" mode="aspectFill"></image>
			<view class="header-content">
				<image class="header-name" src="/static/title.png"></image>
			</view>

			<!-- 轮播图 -->
			<view class="banner-section" v-if="bannerList.length > 0">
				<swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500"  @change="onSwiperChange">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<!-- 如果是图片格式，显示图片 -->
						<image v-if="isImageFile(item)" :src="item" mode="aspectFit" class="banner-image"
							@error="onImageError"></image>
						
						<!-- 如果是视频格式，显示视频组件 -->
						<video v-else-if="isVideoFile(item)" id="aboutVideo" class="banner-image" :src="item"
							:poster="videoPoster" controls :autoplay="false" :loop="false" :muted="false"
							:show-center-play-btn="true" :show-play-btn="true" :show-fullscreen-btn="true"
							@play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnded" @error="onVideoError"></video>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 广告滚动文字 -->
		<view class="ad-scroll-container" v-if="adTextList.length > 0">
			<view class="ad-scroll-wrapper">
				<image class="ad-icon" src="/static/home/home_icon_1.png" mode=""></image>
				<u-notice-bar  class="ad-scroll-content" :text="adTextList" :icon="none" color="#666666"  bgColor="rgba(256,256,256,0)" direction="column"></u-notice-bar>
				<!-- <view class="ad-scroll-content">
					<text class="ad-text">{{ adTextList[currentAdIndex] }}</text>
				</view> -->
			</view>
			
		</view>

		<!-- 分类图标区域 -->
		<view class="category-section" :class="{active: categoryList.length > 5}" v-if="categoryList.length > 0">
			<image class="category-bg" :src="bg_2">
			</image>
			<view class="category-content">
				<view class="category-title">
					<view class="category-title-left">
						<image class="left-icon" src="/static/home/home_ppzq_2.png"></image>
						<image class="left-title" :src="bg_3">
						</image>
					</view>
					<view class="category-title-right" @click="go('/subPackages/home/brandZone/brandZone')">
						<image class="right-back" src="/static/home/home_ppzq_3.png"></image>
					</view>
				</view>
				<view class="category-grid">
					<view class="category-item" v-for="(item, index) in categoryList" :key="index"
						@click="go(`/subPackages/home/brandZone/brandZone?id=${item.id}`)">
						<image :src="item.brandLogo" class="category-icon"></image>
						<text class="category-name">{{ item.brand }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 限时抢购 -->
		<view class="flash-sale-section" v-if="flashSaleList.length > 0 && totalSeconds > 0">
			<view class="section-header">
				<image class="flash-bg" :src="bg_4" mode=""></image>
				<view class="section-title-row">
					<view class="title-container">
						<image src="/static/home/home_xstj_1.png" class="hot-icon"></image>
						<image :src="bg_5" class="hot-title"></image>
					</view>
					<view class="countdown-container">
						<image src="/static/home/home_xstj_3.png" class="time-icon"></image>
						<view class="countdown-day" v-if="totalSeconds >86400">剩下{{ Math.floor(totalSeconds/86400)}}天
						</view>
						<view v-else>
							<view class="countdown-item">
								<text class="countdown-number">{{ countdown.hours }}</text>
							</view>
							<text class="countdown-colon">:</text>
							<view class="countdown-item">
								<text class="countdown-number">{{ countdown.minutes }}</text>
							</view>
							<text class="countdown-colon">:</text>
							<view class="countdown-item">
								<text class="countdown-number">{{ countdown.seconds }}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="flash-sale-scroll-view">
				<scroll-view scroll-x="true" class="flash-sale-scroll">
					<view class="flash-sale-list">
						<view class="flash-sale-item" v-for="(item, index) in flashSaleList" :key="index"
							@click="goToDetail(item)">
							<image :src="item.mainImage" class="product-image"></image>
							<view class="flash-info">
								<text class="product-name">{{ item.title }}</text>
								<view class="flash-address">
									<image src="/static/home/home_address.png" class="address-image"></image>
									<text class="product-desc">{{ item.area }}</text>
								</view>
								<view class="flash-price">
									<text class="product-price">¥{{ item.price }}</text>
									<text class="product-unit">{{ item.unit }}</text>
								</view>
								<view class="add-btn">
									<text class="product-line-price">¥{{ item.underlinePrice }}</text>
									<image :id="`flash-add-${index}`" src="/static/home/home_add.png" class="add-image" @tap.stop="addProductWithAnimation(item, $event, 'flash', index)">
									</image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>

		<!-- 新品推荐 -->
		<view class="new-products-section" v-if="newProductsList.length > 0">
			<view class="new-products-header">
				<image class="new-products-bg" :src="bg_6" mode=""></image>
				<view class="title-container">
					<image :src="bg_7" class="title-icon"></image>
				</view>
			</view>
			<view class="new-products-scroll-view">
				<scroll-view scroll-x="true" class="new-products-scroll">
					<view class="new-products-list">
						<view class="new-products-item" v-for="(item, index) in newProductsList" :key="index"
							@click="goToDetail(item)">
							<image :src="item.mainImage" class="new-products-image"></image>
							<view class="new-products-info">
								<text class="new-products-name">{{ item.title }}</text>
								<view class="new-products-address">
									<image src="/static/home/home_address.png" class="address-image"></image>
									<text class="new-products-desc">{{ item.area }}</text>
								</view>
								<view class="add-btn">
									<view class="price">
										<view class="new-products-price">
											<text class="new-price">¥{{ item.price }}</text>
											<text class="new-unit">{{ item.unit }}</text>
										</view>
										<text class="new-line-price">¥{{ item.underlinePrice }}</text>
									</view>
									<image :id="`new-add-${index}`" src="/static/home/home_add.png" class="add-image" @tap.stop="addProductWithAnimation(item, $event, 'new', index)">
									</image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>

		<!-- 爆品推荐 -->
		<view class="hot-products-section" v-if="hotProductsList.length > 0">
			<view class="hot-products-header">
				<view class="hot-products-title">
					<image :src="bg_8" class="title-icon"></image>
				</view>
			</view>
			<scroll-view scroll-x="true" class="hot-products-scroll">
				<view class="hot-products-list">
					<view class="hot-products-item" v-for="(item, index) in hotProductsList" :key="index"
						@click="goToDetail(item)">
						<image :src="item.mainImage" class="hot-products-image" mode="aspectFit"></image>
						<view class="hot-products-info">
							<text class="hot-products-name">{{ item.title }}</text>
							<view class="hot-products-address">
								<image src="/static/home/home_address.png" class="address-image"></image>
								<text class="hot-products-desc">{{ item.area }}</text>
							</view>
							<view class="add-btn">
								<view class="price">
									<view class="hot-products-price">
										<text class="hot-price">¥{{ item.price }}</text>
										<text class="hot-unit">{{ item.unit }}</text>
									</view>
									<text class="hot-line-price">¥{{ item.underlinePrice }}</text>
								</view>
								<image :id="`hot-add-${index}`" src="/static/home/home_add.png" class="add-image" @tap.stop="addProductWithAnimation(item, $event, 'hot', index)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品列表 -->
		<!-- <view class="goods-section" v-if="productsList.length > 0">
			<view class="goods-grid">
				<view class="goods-card" v-for="(item, index) in productsList" :key="index">
					<image :src="item.mainImage" class="goods-card-image"></image>
					<view class="goods-card-content">
						<text class="goods-card-title">{{ item.title }}</text>
						<view class="goods-card-bottom">
							<view class="info">
								<view class="goods-products-address">
									<image src="/static/home/home_address.png" class="address-image"></image>
									<text class="goods-products-desc">{{ item.area }}</text>
								</view>
								<view class="price">
									<text class="goods-card-price">{{ item.price }}</text>
									<text class="goods-card-unit">{{ item.unit }}</text>
									<text class="goods-card-line-price">{{ item.underlinePrice }}</text>
								</view>
							</view>
							<image src="/static/home/home_add.png" class="add-image"></image>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 商品列表 -->
		<view class="goods-section">
			<view class="waterfall-container">
				<!-- 左侧列表 -->
				<view class="waterfall-column">
					<view class="goods-card" v-for="(item, index) in leftList" :key="item.id" @click="goToDetail(item)">
						<image :src="item.mainImage" class="goods-card-image" mode="widthFix"></image>
						<view class="goods-card-content">
							<text class="goods-card-title">{{ item.title }}</text>
							<view class="goods-card-bottom">
								<view class="info">
									<view class="goods-products-address">
										<image src="/static/home/home_address.png" class="address-image"></image>
										<text class="goods-products-desc">{{ item.area }}</text>
									</view>
									<view class="price">
										<text class="goods-card-price">¥{{ item.price }}</text>
										<text class="goods-card-unit">{{ item.unit }}</text>
										<text class="goods-card-line-price">{{ item.underlinePrice }}</text>
									</view>
								</view>
								<image :id="`left-add-${index}`" src="/static/home/home_add.png" class="add-image" @tap.stop="addProductWithAnimation(item, $event, 'left', index)">
								</image>
							</view>
						</view>
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="waterfall-column">
					<view class="goods-card" v-for="(item, index) in rightList" :key="item.id"
						@click="goToDetail(item)">
						<image :src="item.mainImage" class="goods-card-image" mode="widthFix"></image>
						<view class="goods-card-content">
							<text class="goods-card-title">{{ item.title }}</text>
							<view class="goods-card-bottom">
								<view class="info">
									<view class="goods-products-address">
										<image src="/static/home/home_address.png" class="address-image"></image>
										<text class="goods-products-desc">{{ item.area }}</text>
									</view>
									<view class="price">
										<text class="goods-card-price">¥{{ item.price }}</text>
										<text class="goods-card-unit">{{ item.unit }}</text>
										<text class="goods-card-line-price">{{ item.underlinePrice }}</text>
									</view>
								</view>
								<image :id="`right-add-${index}`" src="/static/home/home_add.png" class="add-image" @tap.stop="addProductWithAnimation(item, $event, 'right', index)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 购物车动画元素 -->
		<view class="cart-animation-container">
			<view 
				v-for="(ball, index) in animationBalls" 
				:key="index"
				v-show="ball.show"
				class="cart-ball"
				:style="{
					left: ball.startX + 'px',
					top: ball.startY + 'px',
					transform: `translate(${ball.translateX}px, ${ball.translateY}px)`,
					transition: ball.transition
				}"
			>
				<image src="/static/home/home_add.png" class="ball-icon"></image>
			</view>
		</view>
		<!-- 首页弹框 -->
		<u-overlay :show="showPopup"  mode="center" mask-custom-style="background-color: rgba(0,0,0,0.5)"  @close="closePopup">
			<div class="popup-container">
				<view class="popup-content">
					<!-- 关闭按钮 -->
					<view class="close-btn" @click="closePopup">
						<u-icon name="close" color="#fff" size="20"></u-icon>
					</view>
					<!-- 弹框图片 -->
					<image :src="popupImg" class="popup-image" mode="aspectFit" @click="go('/subPackages/mine/vip/vip')"></image>
				</view>
			</div>
		</u-overlay>
	</view>
</template>

<script>
	import App from '@/App.vue'
	export default {
		data() {
			return {
				bg_1: App.imgBaseUrl + "/2025/07/03/adb4a96e569140529f96835cdb9b6bd9.png",
				bg_2: App.imgBaseUrl + "/2025/07/03/236b90aec0ee47c7bb258eb1921f973c.png",
				bg_3: App.imgBaseUrl + "/2025/07/03/b3178252189c47e6a30281e557f3f919.png",
				bg_4: App.imgBaseUrl + "/2025/07/03/444637043093453f8f381db14a38de6b.png",
				bg_5: App.imgBaseUrl + "/2025/07/03/7d457f2b525d47838926cfa55ba425f1.png",
				bg_6: App.imgBaseUrl + "/2025/07/03/29280ef517314ca79d46e5a7aeaebb64.png",
				bg_7: App.imgBaseUrl + "/2025/07/03/f8235a66f5f94c49af1d03fa67e9a8f7.png",
				bg_8: App.imgBaseUrl + "/2025/07/03/9360285721844cbfb81ade6ae0d654e7.png",
				bannerList: [],
				adTextList: [],
				categoryList: [],
				currentAdIndex: 0,
				countdown: {
					hours: '0',
					minutes: '0',
					seconds: '0'
				},
				totalSeconds: 20, // 2小时30分45秒 = 9045秒
				countdownTimer: null,
				flashSaleList: [],
				newProductsList: [],
				hotProductsList: [],
				productsList: [],
				leftList: [],
			rightList: [],
			isScrolling: true,
			// 动画相关数据
			animationBalls: [],
			maxBalls: 50, // 最大同时动画数量
			showPopup:false,
			popupImg:null,
			}
		},
		mounted() {
			//获取轮播图和通知信息
			this.requestSetting();
			//获取品牌专区信息
			this.requestBrand();
			//限时特价商品
			this.requestProductSpecial();
			//新品推荐
			this.requestProductNew();
			//爆品推荐
			this.requestProductHot();
			//商品列表
			this.requestGoodsList();
			
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				//请求购物车商品
				this.requestCartList()
			} else {
				// 未登录时清空购物车角标
				this.clearCartCount();
			}
		},
		onLoad() {

		},
		onShareAppMessage: function(options) {
			return {
				title: '',
				path: '',
				imageUrl: ''
			};
		},
		computed: {
			//获取完整路径
			getImageUrl(url) {
				console.log("getImageUrl ------ +++++", App.imgBaseUrl + url)
				return App.imgBaseUrl + url
			}
		},
		methods: {
			// 关闭弹框
			closePopup() {
				this.showPopup = false;
			},
			
			//请求购物车商品
			requestCartList() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/order/listCart',
					success: res => {
					console.log("res CartList-------- ", res)
					if (res.code == 200) {
						if(res.rows.length > 0){
							// 更新购物车角标数量
							const totalCount = res.rows[0].details.reduce((total, item) => {
								return total + (item.productNum || 0);
							}, 0);
							that.setCartCount(totalCount);
						}else{
							// 购物车为空时清空角标
							that.clearCartCount();
						}
					} else {
						// 购物车为空时清空角标
						that.clearCartCount();
					}
				},
					fail: err => {},
					complete: com => {}
				})
			},
			//获取轮播图和通知信息
			requestSetting() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/config/list',
					success: res => {
						if (res.code == 200) {
							console.log("res Setting-------- ", res.rows[0])
							const info = res.rows[0]
							that.popupImg = info.adList
							const userData = uni.getStorageSync('userInfo')
							console.log("userData ------ ",userData)
							const curLevel = parseInt(userData.level) > 0 ? parseInt(userData.level) : 0
							if(that.popupImg.length > 0 && curLevel === 0){
								this.showPopup = true	
							}
							that.bannerList = info &&
								info.imagePath &&
								typeof info.imagePath === 'string' &&
								info.imagePath.trim() !== '' ?
								info.imagePath.split(",").filter(item => item.trim() !== '') :
								[];
							that.adTextList = JSON.parse(info ? info.notice : '{}');
							// 目标时间字符串
							const targetTimeStr = info && info.limitTime || "";
							// 转换为时间戳（注意：这里会按设备时区解析）
							const targetTimestamp = Math.floor(new Date(targetTimeStr).getTime() / 1000);
							// 获取当前时间戳
							const currentTimestamp = Math.floor(new Date().getTime() / 1000);
							// 比较时间戳
							const diff = targetTimestamp - currentTimestamp; // 毫秒差值
							console.log("res diff ", diff)
							that.totalSeconds = diff
							if (that.totalSeconds <= 86400) {
								// 启动倒计时
								that.startCountdown();
							}

						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			//获取品牌专区信息
			requestBrand() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/brand/list',
					data:{
						pageSize:10,
						pageNum:1
					},
					success: res => {
						if (res.code == 200) {
							console.log("res Brand-------- ", res)
							that.categoryList = res.rows
						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			//限时特价商品
			requestProductSpecial() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/product/list',
					data: {
						isSpecial: "Y",
						pageSize: 20,
						pageNum: 1,
					},
					success: res => {
						if (res.code == 200) {
							console.log("res Special -----  ", res)
							that.flashSaleList = res.rows
						}
					},
					fail: err => {

					},
					complete: com => {
						;
					}
				})
			},
			//新品推荐
			requestProductNew() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/product/list',
					data: {
						isNew: "Y",
						pageSize: 20,
						pageNum: 1,
					},
					success: res => {
						if (res.code == 200) {
							console.log("res new -----  ", res)
							that.newProductsList = res.rows
						}
					},
					fail: err => {

					},
					complete: com => {
						;
					}
				})
			},
			//爆品推荐
			requestProductHot() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/product/list',
					data: {
						isHot: "Y",
						pageSize: 20,
						pageNum: 1,
					},
					success: res => {
						if (res.code == 200) {
							console.log("res hot -----  ", res)
							that.hotProductsList = res.rows
						}
					},
					fail: err => {

					},
					complete: com => {
						;
					}
				})
			},
			//商品列表
			requestGoodsList() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/product/list',
					data: {
						productType:1,
						pageSize: 20,
						pageNum: 1,
						sortParam:'price',
						sortRule:'asc',
					},
					success: res => {
						if (res.code == 200) {
							console.log("res GoodsList -----  ", res)
							that.productsList = res.rows
							// 手动分配数据到左右列表
							res.rows.forEach((item, index) => {
								if (index % 2 === 0) {
									that.leftList.push(item);
								} else {
									that.rightList.push(item);
								}
							});
						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			//添加商品
			addProduct(item) {
				console.log(" add product ===== ", item)
				let that = this
				const orderData = {
					orderType: 1,
					details: [{
						productId: item.id,
						mainImage: item.mainImage,
						productTitle: item.title,
						productPrice: item.price,
						productNum: 1,
						unit: item.unit,
						areaAddr: item.area,
					}],
				}
				console.log(" add product orderData===== ", JSON.stringify(orderData))
				that.https({
				method: "POST",
				url: '/project/order/editCart',
				data: orderData,
				success: res => {
					if (res.code == 200) {
						uni.showToast({
							title: '已添加到购物车',
							icon: 'success'
						});
						console.log("res addProduct -----  ", res)
						// 增加购物车角标数量
						that.addCartCount(1);
					}
				},
				fail: err => {},
				complete: com => {}
			})
			},
			
			// 带动画的添加商品方法
			addProductWithAnimation(item, event, type, index) {
				// 添加点击反馈效果
				const elementId = `${type}-add-${index}`;
				const query = uni.createSelectorQuery().in(this);
				
				// 给按钮添加点击效果
				query.select(`#${elementId}`).fields({
					node: true
				}, (res) => {
					if (res && res.node) {
						// 添加点击缩放效果
						res.node.style.transform = 'scale(0.9)';
						res.node.style.transition = 'transform 0.1s';
						
						setTimeout(() => {
							res.node.style.transform = 'scale(1)';
						}, 100);
					}
				}).exec();
				
				// 先执行添加商品逻辑
				this.addProduct(item);
				
				// 执行动画
				this.startCartAnimation(event, type, index);
			},
			
			// 开始购物车动画
			startCartAnimation(event, type, index) {
				// 限制同时动画数量
				if (this.animationBalls.length >= this.maxBalls) {
					return;
				}
				
				// 获取点击按钮的位置
				const elementId = `${type}-add-${index}`;
				const query = uni.createSelectorQuery().in(this);
				
				query.select(`#${elementId}`).boundingClientRect((rect) => {
						if (rect) {
							// 获取购物车选项卡位置（底部第4个选项卡）
							const systemInfo = uni.getSystemInfoSync();
							const tabBarHeight = 80; // tabBar高度（rpx转px）
							const safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
							// 购物车是第4个选项卡（索引3），每个选项卡占1/5宽度，购物车在3/5位置
							const cartTabPosition = {
								x: systemInfo.windowWidth * 0.68, // 第4个选项卡位置
								y: systemInfo.windowHeight - safeAreaBottom + 30
							};
						
						// 创建动画球
						const ball = {
							show: true,
							startX: rect.left + rect.width / 2,
							startY: rect.top + rect.height / 2,
							translateX: 0,
							translateY: 0,
							transition: 'none'
						};
						
						this.animationBalls.push(ball);
						
						// 延迟启动动画
						this.$nextTick(() => {
							setTimeout(() => {
								// 计算目标位置
								const targetX = cartTabPosition.x - ball.startX;
								const targetY = cartTabPosition.y - ball.startY;
								
								// 设置动画 - 使用抛物线效果
								ball.translateX = targetX;
								ball.translateY = targetY;
								ball.transition = 'all 1.0s cubic-bezier(0.17, 0.67, 0.35, 0.35)';
								
								// 动画结束后清理
								setTimeout(() => {
									ball.show = false;
									// 从数组中移除
									const ballIndex = this.animationBalls.indexOf(ball);
									if (ballIndex > -1) {
										this.animationBalls.splice(ballIndex, 1);
									}
								}, 1000);
							}, 50);
						});
					}
				}).exec();
			},

			// 启动倒计时
			startCountdown() {
				let that = this
				that.countdownTimer = setInterval(() => {
					if (that.totalSeconds > 0) {
						that.totalSeconds--;
						that.updateCountdownDisplay();
					} else {
						// 清除倒计时定时器
						if (that.countdownTimer) {
							clearInterval(that.countdownTimer);
						}
					}
				}, 1000);
			},

			// 更新倒计时显示
			updateCountdownDisplay() {
				const hours = Math.floor(this.totalSeconds / 3600);
				const minutes = Math.floor((this.totalSeconds % 3600) / 60);
				const seconds = this.totalSeconds % 60;

				this.countdown.hours = hours.toString().padStart(2, '0');
				this.countdown.minutes = minutes.toString().padStart(2, '0');
				this.countdown.seconds = seconds.toString().padStart(2, '0');
			},
			goToDetail(item) {
				this.go(`/subPackages/classify/goodsDetail/goodsDetail?id=${item.id}`)
			},
			// 判断是否为图片文件
			isImageFile(url) {
				if (!url) return false;
				const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
				const lowerUrl = url.toLowerCase();
				return imageExtensions.some(ext => lowerUrl.includes(ext));
			},
			
			// 判断是否为视频文件
			isVideoFile(url) {
				if (!url) return false;
				const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm', '.m4v'];
				const lowerUrl = url.toLowerCase();
				return videoExtensions.some(ext => lowerUrl.includes(ext));
			},
			
			// 视频播放事件
			onVideoPlay() {
				console.log('视频开始播放')
				this.isVideoPlaying = true
			},
			
			onVideoPause() {
				console.log('视频暂停')
				this.isVideoPlaying = false
			},
			
			onVideoEnded() {
				console.log('视频播放结束')
				this.isVideoPlaying = false
			},
			
			onVideoError(e) {
				console.log('视频播放错误:', e)
				uni.showToast({
					title: '视频播放失败',
					icon: 'none'
				})
			},
			onSwiperChange(e) {
				this.pauseAllVideos()
			},
			pauseAllVideos() {
			    try {
			        // 获取页面中的视频上下文
			        const videoContext = uni.createVideoContext('aboutVideo', this);
			        if (videoContext) {
			            videoContext.pause();
			        }
			    } catch (error) {
			        console.log('暂停视频失败:', error);
			    }
			},
		},
		beforeDestroy() {
			this.pauseAllVideos()
			// 清除倒计时定时器
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		},
	}
</script>

<style lang="scss">
	.home-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		width: 100%;
		/* 根据需求调整 */
		height: 560rpx;
		/* 示例高度 */
		position: relative;

		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 360rpx;
		}

		.header-content {
			position: absolute;
			top: 128rpx;
			left: 30rpx;
			// width: 100%;

			.header-name {
				width: 214rpx;
				height: 38rpx;
			}
		}


		/* 轮播图区域 */
		.banner-section {
			position: absolute;
			// border-radius: 12rpx;
			overflow: hidden;
			top: 208rpx;
			left: 30rpx;
			right: 30rpx;
			height: 360rpx;
		}

		.banner-swiper {
			height: 180px;
			border-radius: 12rpx;
		}

		.banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
			width: 90%;
			text-align: right;
		}

		.banner-image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}

	/* 广告滚动文字 */
	.ad-scroll-container {
		// width: 100%;
		margin: 32rpx 30rpx 16rpx;
		padding: 0 16rpx;
		background: #DFF4E5;
		overflow: hidden;
		position: relative;

		.ad-scroll-wrapper {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;

			.ad-icon {
				width: 24rpx;
				height: 24rpx;
			}

			.ad-scroll-content {
				display: flex;
				align-items: center;
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 40rpx;
				animation: slideUp 5s ease-in-out infinite;

				.ad-text {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
					line-height: 60rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 90%;
				}

		
			}
		}
	}

	/* 分类区域 */
	.category-section {
		margin: 0 30rpx;
		height: 254rpx;
		position: relative;

		// padding: 20px;
		.category-bg {
			position: absolute;
			left: 0;
			height: 0;
			width: 100%;
			height: 100%;
		}

		.category-content {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			height: 0;

			.category-title {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.category-title-left {
					display: flex;

					.left-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.left-title {
						margin-left: 8rpx;
						width: 133rpx;
						height: 32rpx;
					}
				}

				.category-title-right>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.category-grid {
				display: flex;
				flex-wrap: wrap;
				// margin-top: 10rpx;

				.category-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;

					.category-icon {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 8rpx;
					}

					.category-name {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #333333;
						text-align: center;
					}
				}
			}
		}
	}
	.category-section.active{
		height: 374rpx;
	}
	

	/* 限时抢购 */
	.flash-sale-section {
		margin: 20rpx 30rpx 0;
		background-color: #fff;
		border-radius: 12rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			height: 80rpx;
			.flash-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 80rpx;
			}

			.section-title-row {
				z-index: 2;
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-container {
					display: flex;
					margin: 18rpx 30rpx;

					.hot-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
					}

					.hot-title {
						width: 133rpx;
						height: 32rpx;
					}
				}

				.countdown-container {
					display: flex;
					align-items: center;
					margin: 18rpx 30rpx;

					.countdown-day {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 20rpx;
						color: #EF6907;
						text-align: left;
					}

					.time-icon {
						width: 40rpx;
						height: 40rpx;
					}

					.countdown-colon {
						color: #EF6907;
						font-size: 24rpx;
						font-weight: 600;
						margin: 0 4rpx;
					}

					.countdown-item {
						background: #EF6907;
						border-radius: 8rpx;
						padding: 8rpx 12rpx;
						margin: 0 4rpx;
						min-width: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.countdown-number {
							color: #ffffff;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 1;
						}
					}
				}
			}
		}
		.flash-sale-scroll-view {
			margin: 0 18rpx;
		}
		.flash-sale-scroll {
			background: #fff;
			// margin-top: 80rpx;
			border-radius: 0 0 12rpx 12rpx;
			height: 210rpx;

			.flash-sale-list {
				height: 210rpx;
				display: flex;
				gap: 20rpx;
				// align-items: center;

				.flash-sale-item {
					display: flex;
					align-items: center;
					padding: 0 16rpx;
					border-radius: 12rpx;
					background: #FFF6EE;
					height: 188rpx;
					position: relative;

					.product-image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 12rpx;
					}

					.flash-info {
						margin-left: 24rpx;

						.product-name {
							width: 180rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							text-align: left;
							display: block;
						}

						.flash-address {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.address-image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}

							.product-desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #333333;
								text-align: left;
								display: block;
							}
						}

						.flash-price {
							display: flex;
							align-items: center;
							margin-top: 8rpx;

							.product-price {
								font-family: PingFang SC, PingFang SC;
								font-weight: 600;
								font-size: 24rpx;
								color: #FF4C10;
								text-align: left;
							}

							.product-unit {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #333333;
								text-align: left;
							}
						}

						.add-btn {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 16px;
							height: 48rpx;

							.product-line-price {
								height: 48rpx;
								line-height: 48rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #767676;
								text-align: left;
								text-decoration: line-through;
							}

							.add-image {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}
				}
			}
		}
	}

	/* 新品推荐 */
	.new-products-section {
		background-color: #fff;
		margin: 20rpx 30rpx 0;
		border-radius: 12rpx;

		.new-products-header {
			position: relative;

			.new-products-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 80rpx;
			}

			.title-container {
				position: absolute;
				display: flex;
				align-items: center;
				left: 24rpx;
				top: 0;
				width: 100%;
				height: 80rpx;

				.title-icon {
					width: 134rpx;
					height: 32rpx;
				}
			}
		}
		
		.new-products-scroll-view {
			margin: 0 18rpx;
		}

		.new-products-scroll {
			padding-top: 86rpx;
			background: #fff;
			height: 398rpx;
			border-radius: 12rpx;
			white-space: nowrap;

			.new-products-list {
				height: 412rpx;
				display: flex;
				gap: 24rpx;

				// align-items: center;
				.new-products-item {
					display: flex;
					flex-direction: column;
					// align-items: center;
					width: 220rpx;
					height: 372rpx;
					position: relative;

					.new-products-image {
						width: 220rpx;
						height: 220rpx;
						border-radius: 16rpx;
					}

					.new-products-info {
						margin-top: 16rpx;

						.new-products-name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: left;
							margin-bottom: 4rpx;
							display: block;
						}

						.new-products-address {
							margin-top: 4rpx;
							display: flex;
							align-items: center;

							.address-image {
								width: 24rpx;
								height: 24rpx;
							}

							.new-products-desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #333333;
								text-align: left;
								display: block;
							}
						}

						.add-btn {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								display: flex;
								flex-direction: column;
								margin-top: 8rpx;
								
								.new-products-price {
									display: flex;
									align-items: center;

									.new-price {
										font-family: PingFang SC, PingFang SC;
										font-weight: 600;
										font-size: 24rpx;
										color: #FF4C10;
										text-align: left;
									}

									.new-unit {
										margin-left: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 20rpx;
										color: #333333;
										text-align: left;
									}
								}

								.new-line-price {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #767676;
									text-align: left;
									text-decoration: line-through;
								}

							}


							.add-image {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}
				}
			}
		}
	}

	/* 爆品推荐 */
	.hot-products-section {
		margin: 20rpx 30rpx;

		.hot-products-header {
			margin-bottom: 20rpx;

			.hot-products-title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.title-icon {
					width: 296rpx;
					height: 48rpx;
				}
			}
		}

		.hot-products-scroll {
			height: 380rpx;

			.hot-products-list {
				height: 380rpx;
				display: flex;

				// align-items: center;
				.hot-products-item {
					display: flex;
					flex-direction: column;
					border-radius: 12rpx;
					white-space: nowrap;
					margin-right: 10rpx;
					background: #fff;
					width: 248rpx;
					height: 372rpx;
					position: relative;

					.hot-products-image {
						width: 248rpx;
						border-radius: 12rpx 12rpx 0 0;
					}

					.hot-products-info {
						margin: 20rpx;

						.hot-products-name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: left;
							margin-bottom: 4px;
							display: block;
						}

						.hot-products-address {
							display: flex;
							align-items: center;

							.address-image {
								width: 24rpx;
								height: 24rpx;
							}

							.hot-products-desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #333333;
								text-align: left;
								display: block;
							}
						}

						.add-btn {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 16px;

							.price {
								display: flex;
								flex-direction: column;
								.hot-products-price {
									.hot-price {
										font-family: PingFang SC, PingFang SC;
										font-weight: 600;
										font-size: 24rpx;
										color: #FF4C10;
										text-align: left;
									}

									.hot-unit {
										margin-left: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 20rpx;
										color: #333333;
										text-align: left;
									}
								}

								.hot-line-price {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #767676;
									text-align: left;
									text-decoration: line-through;

								}
							}

							.add-image {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}
				}
			}
		}
	}

	.goods-section {
		margin: 20rpx 30rpx;

		.waterfall-container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// padding: 0 15rpx;
		}

		.waterfall-column {
			display: flex;
			flex-direction: column;
			width: 48%;
			/* 或者 calc(50% - 10rpx) */

			.goods-card {
				position: relative;
				border-radius: 12rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				break-inside: avoid;

				/* 防止在元素内部断行 */
				.goods-card-image {
					width: 100%;
					height: 334rpx;
					border-radius: 8rpx;
					margin-bottom: 8rpx;
				}

				.goods-card-content {
					position: relative;
					margin: 10rpx;

					.goods-card-title {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
					}

					.goods-card-bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.info {
							.goods-products-address {
								display: flex;
								align-items: center;

								.address-image {
									width: 24rpx;
									height: 24rpx;
								}

								.goods-products-desc {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 20rpx;
									color: #333333;
									text-align: left;
									display: block;
								}
							}

							.price {
								margin-top: 12rpx;
								display: flex;
								align-items: center;

								.goods-card-price {
									font-family: PingFang SC, PingFang SC;
									font-weight: 600;
									font-size: 24rpx;
									color: #FF4C10;
									text-align: left;
									margin-right: 8rpx;
								}

								.goods-card-unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 20rpx;
									color: #333333;
									text-align: left;
									margin-right: 8rpx;
								}

								.goods-card-line-price {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #767676;
									text-align: left;
									margin-right: 8rpx;
									text-decoration: line-through;
								}
							}

						}

						.add-image {
							width: 48rpx;
							height: 48rpx;

						}
					}

					.goods-card-title {
						font-size: 14px;
						color: #333;
						margin-bottom: 4px;
						display: block;
					}

					.goods-card-desc {
						font-size: 12px;
						color: #999;
						margin-bottom: 8px;
						display: block;
					}

					.goods-card-price {
						font-size: 14px;
						color: #FF6B35;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	/* 购物车动画样式 */
	.cart-animation-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 9999;
	}
	
	.cart-ball {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		z-index: 10000;
		pointer-events: none;
		
		.ball-icon {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			box-shadow: 0 6rpx 20rpx rgba(0, 153, 102, 0.4);
			background: rgba(255, 255, 255, 0.9);
			border: 2rpx solid #009966;
			animation: ballFloat 1.0s ease-out;
		}
	}
	
	@keyframes ballFloat {
		0% {
			transform: rotate(0deg) scale(1);
			opacity: 1;
			box-shadow: 0 6rpx 20rpx rgba(0, 153, 102, 0.4);
		}
		25% {
			transform: rotate(90deg) scale(1);
			opacity: 0.9;
			box-shadow: 0 8rpx 25rpx rgba(0, 153, 102, 0.5);
		}
		50% {
			transform: rotate(180deg) scale(1);
			opacity: 0.8;
			box-shadow: 0 10rpx 30rpx rgba(0, 153, 102, 0.6);
		}
		75% {
			transform: rotate(270deg) scale(1.0);
			opacity: 0.7;
			box-shadow: 0 8rpx 25rpx rgba(0, 153, 102, 0.5);
		}
		100% {
			transform: rotate(360deg) scale(1.0);
			opacity: 0.3;
			box-shadow: 0 4rpx 15rpx rgba(0, 153, 102, 0.3);
		}
	}

	/* 弹框样式 */
	.popup-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
				
		
	}
	.popup-content {
		position: relative;
		width: 696rpx;
		height: 824rpx;
		overflow: hidden;
	}
	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.popup-image {
		width: 100%;
		height: 100%;
	}
</style>